<template>
	<div>
		<!-- Elment-ui：layout布局 -->
		<el-row>
			<el-col :span="8" style="padding-right: 10px">
				<!-- Elment-ui：Card 卡片 -->
				<el-card class="user-card">
					<div class="user-info">
						<img src="../assets/user.jpg" />
						<div class="role-info">
							<p class="role-en">Admin</p>
							<p class="role-name">超级管理员</p>
						</div>
					</div>
					<el-divider></el-divider>
					<!-- Elment-ui：分割线 -->
					<div class="login-info">
						<p class="login-time">上次登录时间： <span>2023-10-25</span></p>
						<p class="login-place">上次登录地点：<span>成都</span></p>
					</div>
				</el-card>
				<!-- Elment-ui：Table表格 -->
				<el-card class="table-card">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column
							v-for="(val, key) in tableLabel"
							:prop="key"
							:label="val"
						></el-table-column>
					</el-table>
				</el-card>
			</el-col>
			<el-col :span="16" style="padding-left: 10px">
				<div class="bill">
					<el-card
						v-for="item in countData"
						:key="item.name"
						:body-style="{ display: 'flex', padding: 0 }"
						><!-- body-style传入的是对象，要动态绑定 -->
						<i
							class="icon"
							:class="`el-icon-${item.icon}`"
							:style="{ background: item.color }"
						></i
						><!-- 动态样式 -->
						<div class="detail">
							<p class="price">￥{{ item.value }}</p>
							<p class="desc">{{ item.name }}</p>
						</div>
					</el-card>
				</div>
				<!-- 折线图 -->
				<el-card class="line-card">
					<div
						class="line-chart"
						ref="lineChart"
						style="height: 280px; width: 600px"
					></div>
				</el-card>
				<div class="charts">
					<el-card>
						<div
							class="bar-chart"
							ref="barChart"
							style="height: 260px; width: 400px"
						></div>
					</el-card>
					<el-card>
						<div
							class="pie-chart"
							ref="pieChart"
							style="height: 260px; width: 400px"
						></div>
					</el-card>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { getHomeData } from "../api"
import * as echarts from "echarts"

export default {
	data() {
		return {
			tableData: [
				// {
				// 	name: "oppo",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
				// {
				// 	name: "vivo",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
				// {
				// 	name: "apple",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
				// {
				// 	name: "hawei",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
				// {
				// 	name: "samsung",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
				// {
				// 	name: "xiaomi",
				// 	todayBuy: 100,
				// 	monthBuy: 300,
				// 	totalBuy: 800,
				// },
			],
			tableLabel: {
				name: "商品",
				todayBuy: "今日购买",
				monthBuy: "本月购买",
				totalBuy: "总购买",
			},
			countData: [
				{
					name: "今日支付订单",
					value: 1234,
					icon: "success",
					color: "#2ec7c9",
				},
				{
					name: "今日收藏订单",
					value: 1234,
					icon: "star-on",
					color: "#ffb980",
				},
				{
					name: "今日未支付订单",
					value: 1234,
					icon: "s-goods",
					color: "#5ab1ef",
				},
				{
					name: "本月支付订单",
					value: 1234,
					icon: "success",
					color: "#2ec7c9",
				},
				{
					name: "本月收藏订单",
					value: 1234,
					icon: "star-on",
					color: "#ffb980",
				},
				{
					name: "本月未支付订单",
					value: 1234,
					icon: "s-goods",
					color: "#5ab1ef",
				},
			],
		}
	},
	mounted() {
		// 请求放在mounted和created都可以
		getHomeData().then(({ data }) => {
			const { tableData } = data.data
			this.tableData = tableData
			// console.log(data.data)

			// 折线图
			// const lineChart = echarts.init(document.getElementById("line-chart"))
			const lineChart = echarts.init(this.$refs.lineChart)

			const { orderData, userData, videoData } = data.data // X轴数据
			const xAxis = Object.keys(orderData.data[0])
			var lineOption = {
				legend: {
					data: xAxis, // 图例
				},
				xAxis: {
					data: xAxis, // X轴
				},
				yAxis: {},
				series: [],
			}
			xAxis.forEach(key => {
				lineOption.series.push({
					name: key,
					data: orderData.data.map(item => item[key]),
					type: "line",
				})
			})
			lineChart.setOption(lineOption)

			// 柱状图
			// const barChart = echarts.init(document.getElementById("bar-chart"))
			const barChart = echarts.init(this.$refs.barChart)
			const barOption = {
				legend: {
					textStyle: {
						color: "#333", // 图例文字颜色
					},
				},
				grid: {
					left: "20%",
				},
				tooltip: {
					trigger: "axis", // 提示框
				},
				xAxis: {
					type: "category", // 类目轴
					data: userData.map(item => item.date),
					axisLine: {
						lineStyle: {
							color: "#17b3a3",
						},
					},
					axisLabel: {
						interval: 0,
						color: "#333",
					},
				},
				yAxis: [
					{
						type: "value",
						axisLine: {
							lineStyle: {
								color: "#17b3a3",
							},
						},
					},
				],
				color: ["#2ec7c9", "#b6a2de"],
				series: [
					{
						name: "新增用户",
						data: userData.map(item => item.new),
						type: "bar",
					},
					{
						name: "活跃用户",
						data: userData.map(item => item.active),
						type: "bar",
					},
				],
			}
			barChart.setOption(barOption)

			// 饼状图
			const pieChart = echarts.init(this.$refs.pieChart)
			const pieOption = {
				tooltip: {
					trigger: "item",
				},
				color: [
					"#0f78f4",
					"#dd536b",
					"#9462e5",
					"#a6a6a6",
					"#e1bb22",
					"#39c362",
					"#3ed1cf",
				],
				series: [
					{
						data: videoData,
						type: "pie",
					},
				],
			}
			pieChart.setOption(pieOption)
		})
	},
}
</script>
s
<style lang="less" scoped>
.user-card {
	.user-info {
		display: flex;
		align-items: center; //垂直居中
		img {
			width: 150px;
			height: 150px;
			border-radius: 50%;
			margin-right: 40px;
		}
		.role-info {
			.role-en {
				font-size: 32px;
				margin-bottom: 10px;
			}
			.role-name {
				color: #999999;
			}
		}
	}
	.el-divider {
		margin: 20px 0;
	}
	.login-info {
		p {
			line-height: 28px;
			font-size: 14px;
			color: #999999;
			span {
				color: #666666;
				margin-left: 60px;
			}
		}
	}
}
.table-card {
	margin-top: 20px;
	height: 460px;
}
.bill {
	display: flex;
	flex-wrap: wrap; // 换行
	justify-content: space-between; // 两端对齐
	.icon {
		width: 80px;
		height: 80px;
		// font-size: 30px; 	// 字体图标可以设置字体样式
		line-height: 80px;
		text-align: center;
		color: #fff;
	}
	.detail {
		display: flex; // 使用flex布局改变主轴方向
		flex-direction: column;
		justify-content: center;
		text-align: center;
		margin-left: 15px;
		.price {
			font-size: 30px;
			line-height: 30px;
			// height: 30px;
			margin-bottom: 10px;
		}
		.desc {
			font-size: 14px;
			color: #999999;
		}
	}
	.el-card {
		width: 32%;
		margin-bottom: 20px;
	}
}
.line-card {
	display: flex;
	justify-content: center;
}
.charts {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	.el-card {
		width: 48%;
		display: flex;
		justify-content: center;
	}
}
</style>
